Creating Dropdown Menu Using CSS

If you have been creating facebook applications, you know in a FBML application, the traditional javascript code is not allowed. The facebook platform has its own implementation of the javascript named FBJS (FaceBook JavaScript). The FBJS is very limited as compared to traditional javascript. So you would find yourself in trouble if you wanted to create a dropdown menu using FBJS. Now because traditional javascript is not allowed in a FBML application and FBJS is troublesome when it comes to creating menus, we will have to find some other solution to creating the dropdown menu. Well, CSS exhibits great flexibility to solve this problem. The CSS’s display property is used effectively to create the dropdown menu.

Here is the CSS code:

	/* Drop Down Menu Start */
	#container
	{
		width: 760px;
		margin:0 auto;
		font-size:11pt;
		background:#edeff4;
		font-size:12px;
		font-family:tahoma, verdana, arial;
	}
	#menu{position:absolute; z-index:1; border-top:1px solid #f6f6f6; font-weight:bold; margin-bottom:0px; left:0px; margin-left:0px; margin-top:-15px; color:#3b5898; font-size:11px; font-family:tahoma; } /* adjust margin property if needed */
	#menu ul .item{display:none;}
	#menu ul:hover .item{display:block;background:#edeff4;padding:5px;margin:1px; color:#3b5898;cursor:pointer; font-weight:normal;}
	#menu ul:hover .item a{color:#000000;text-decoration:none; font-size:11px; font-family:tahoma;cursor:pointer;}
	#menu ul:hover .item a:hover{color:#3b5898;cursor:pointer;}
	#menu ul:hover{color:#3b5898;background:#3b5898;color:#ffffff;}
	#menu ul{width:150px;float:left;margin:0px;padding:1px;background:#edeff4;list-style:none;cursor:pointer;}
	.clear{clear:both;height:10px;}
	/* Drop Down Menu End */

And here is the html code for the dropdown menu:

<div id="container" style="background:#edeff4; width:760px; position:relative; margin:auto;" align="center">
	<div id="menu">

		<ul id="item1">
			<li class="top" style="padding:6px;">Take Action &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li>
			<div align="left"><li class="item"><a href="#">My ECO Footprint</a></li></div>
			<div align="left"><li class="item"><a href="#">Reduce My Impact</a></li></div>
			<div align="left"><li class="item"><a href="#">Play Green Challenge</a></li></div>
			<div align="left"><li class="item"><a href="index.php?page=invite" style="outline:none;">Spread The Word</a></li></div>
			<div align="left"><li class="item"><a href="#">Green Ideas</a></li></div>
			<div align="left"><li class="item"><a href="#">ECO Products</a></li></div>
		</ul>

		<ul id="item2">
			<li class="top" style="padding:6px;">My Green World &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li>
			<div align="left"><li class="item"><a href="#">Check My World</a></li></div>
			<div align="left"><li class="item"><a href="#">Visit Other Worlds</a></li></div>
			<div align="left"><li class="item"><a href="#">Green Rankings</a></li></div>
			<div align="left"><li class="item"><a href="#">My Green Badge</a></li></div>
		</ul>

		<ul id="item3">
			<li class="top" style="padding:6px;">The Stores &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li>
			<div align="left"><li class="item"><a href="#">Green My World</a></li></div>
			<div align="left"><li class="item"><a href="#">Send Green Gifts</a></li></div>
			<div align="left"><li class="item"><a href="#">Get Green Coins</a></li></div>
			<div align="left"><li class="item"><a href="#">Get Carbon Reductions</a></li></div>
		</ul>

		<ul style="background:#edeff4; width:113px; cursor:default;">
			<li style="padding:6px;background:#edeff4;">&nbsp;</li>
		</ul>

		<ul id="item4">
			<div align="right"><li class="top" style="padding:6px;">About &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li></div>
			<div align="left"><li class="item"><a href="#">Global Warming?</a></li></div>
			<div align="left"><li class="item"><a href="#">About Greenbook</a></li></div>
			<div align="left"><li class="item"><a href="#">Contact Us</a></li></div>
		</ul>
	</div>

See the demo here.